<template>
    <div>
        <Navtitle title="编辑优惠券"></Navtitle>
        <form :onsubmit="submit" class="formstyle">
            <div>
                <strong>
                    优惠券类型:
                </strong>
                <input type="text" v-model="type" list="sexlist">
                <datalist id="sexlist">
                    <option>全场赠券</option>
                    <option>会员赠券</option>
                    <option>购物赠券</option>
                    <option>注册赠券</option>
                </datalist>
            </div>
            <div>

                <strong>
                    <i>*</i>
                    优惠券名称:
                </strong>
                <input type="text" v-model="name">
            </div>
            <div>
                <strong>
                    适用平台:
                </strong>
                <input type="text" v-model="platform" list="sexlist2">
                <datalist id="sexlist2">
                    <option >全平台</option>
                    <option>移动平台</option>
                    <option>PC平台</option>
                </datalist>
            </div>
            <div>

                <strong>
                    <i>*</i>
                    总发行量:
                </strong>
                <input type="text" v-model="count">
            </div>
            <div>

                <strong>
                    <i>*</i>
                    面额:
                </strong>
                <input type="text" v-model="amount" class="inputtwo">
                <span>元</span>
            </div>
            <div>
                <strong>
                    每人限领:
                </strong>
                <input type="text" class="inputtwo" v-model="perLimit">
                <span>张</span>
            </div>
            <div>
                <strong>
                    使用门槛:
                </strong>
                <span class="spantwo">满</span>
                <input type="text" class="inputthree" v-model="minPoint">
                <span>元可用</span>
            </div>
            <div>
                <strong>
                    领取日期:
                </strong>
                <el-date-picker v-model="startTime" type="date" placeholder="请选择日期" size="default" />
            </div>
            <div>
                <strong>
                    有效期:
                </strong>
                <el-date-picker v-model="startTime" type="date" placeholder="请选择日期" size="default" />
                &emsp;至&emsp;&nbsp;
                <el-date-picker v-model="endTime" type="date" placeholder="请选择日期" size="default" />
            </div>
            <div>
                <strong>
                    可使用商品:
                </strong>
                <el-radio-group v-model="useType2">
                    <el-radio-button label="0">全场通用</el-radio-button>
                    <el-radio-button label="1">指定分类</el-radio-button>
                    <el-radio-button label="2">指定商品</el-radio-button>
                </el-radio-group>
            </div>
            <div>
                <strong>
                    备注:
                </strong>
                <textarea name="" id="" cols="30" rows="4" v-model="note"></textarea>
            </div>
            <div>
                <strong></strong>
                <input type="submit" value="提交" class="submit">
            </div>
        </form>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Navtitle from '@/components/_s_yingxiao/_s_NavTitle.vue'
//获取传递而来的id
import { useRoute } from 'vue-router'


// 进来之后请求这个接口相关的数据
// 获取优惠券是和修改优惠券配合使用的 getOneCupon updateCoupon
import { flash } from '@/request/api'
// 获取id
const route = useRoute()
let CuponID = route.query.id
// 创建基本动态数据
let type = ref('') //类型处理后
let type2 = ref(0)
let name = ref('无') //名称
let platform = ref('') // 可用平台 处理后

let useType = ref('') // 可用商品 处理后
let useType2 = ref(0)
let count = ref(10) //总发行量
let amount = ref(0) //面额
let perLimit = ref(1) //每人限领
let minPoint = ref(100) //使用门槛
let startTime = ref('') //领取日期
let endTime = ref('')  //结束日期
let note = ref('备注') //备注
// 获取
flash.getOneCupon(CuponID).then(res => {
    // 赋值给双向绑定的内容 才能进行修改
    type.value = res.type == 0
        ? '全场赠券'
        : (res.type == 1
            ? '会员赠券'
            : (res.type == 2
                ? '购物赠券'
                : '注册赠券'))
    type2.value = res.type
    name.value = res.name
    count.value = res.count
    amount.value = res.amount
    perLimit.value = res.perLimit
    minPoint.value = res.minPoint
    startTime.value = res.startTime
    endTime.value = res.endTime
    useType2.value = res.useType
    platform.value = res.platform == 0 ? '全平台' : ( res.platform== 1 ? '移动平台' : 'PC平台' )
    note.value = res.note
})
// 修改
let submit = () => {

}
</script>
 
<style lang="scss" scoped>
.formstyle {
    font-size: 14px;
    width: 800px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    color: #666;

    div {
        padding: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 200px;

        i {
            color: red;
            padding: 0 1px;
        }

        strong {
            text-align: right;
            width: 100px;
            padding-right: 20px;
        }

        span {
            height: 15px;
            background-color: rgb(245, 247, 250);
            padding: 3px 6px;
            border: 1px solid #ddd;
            padding: 8px 20px;
            color: #999;
            border-left: none;
            border-radius: 0 3px 3px 0;
        }

        .spantwo {
            border: 1px solid #ddd;
            border-right: none;
            border-radius: 3px 0px 0px 3px;

        }

        input {
            border: 1px solid #ddd;
            padding: 8px 10px;
            outline: none;
            border-radius: 3px;
        }

        .inputtwo {
            border-radius: 3px 0 0 3px;
        }

        .inputthree {
            border-radius: 0 0 0 0;
        }

        textarea {
            width: 300px;
            height: 100px;
            box-sizing: border-box;
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
            outline: none;
        }

        .submit {
            background-color: rgb(64, 158, 255);
            border: none;
            padding: 8px 15px;
            color: white;
        }
    }
}

.formstyle div[data-v-087bc0c5] {
    padding-left: 0;
}
</style>